<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>干干</title>
    <script rel="script" src="幻灯片.js" ></script>
    <link rel="stylesheet" type="text/css" href="幻灯片.css">
</head>
<body>
<div class="slideshow-container">

    <!--下面的 class 里面使用空格 可以理解为 样式复用与组合
        也即 下面同时拥有 myslides 和 fade样式
    -->
    <div class="myslides fade">
        <div class="numbertext">1 / 3</div>
        <img src="img/img_fjords_wide.jpg" alt="峡湾" style="width: 100%">
        <div class="text">文本 1</div>
    </div>

    <div class="myslides fade">
        <div class="numbertext">2 / 3</div>
        <img src="img/img_mountains_wide.jpg" alt="山峰" style="width: 100%">
        <div class="text">文本 2</div>
    </div>

    <div class="myslides fade">
        <div class="numbertext">3 / 3</div>
        <img src="img/img_nature_wide.jpg" alt="自然" style="width: 100%">
        <div class="text">文本 3</div>
    </div>

<!--    <a class="prev" onclick="PlusSlides(-1)"><</a>-->
<!--    <a class="next" onclick="PlusSlides(1)">></a>-->

</div>
<br>

<div style="text-align: center">
<!--    <span class="dot" onclick="CurrentSlide(1)"></span>-->
<!--    <span class="dot" onclick="CurrentSlide(2)"></span>-->
<!--    <span class="dot" onclick="CurrentSlide(3)"></span>-->

    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>

</div>

</body>
</html>


<!--
    <a href="#"></a>
    基本结构：‌
        <a>：        锚点标签，用于创建超链接
        href="#"：   链接目标为当前页面顶部
        空内容：    标签内没有显示文本
    功能特点：‌
        点击后会滚动到页面顶部
        常用于临时占位链接或JavaScript交互的锚点
        不会跳转到其他页面或外部链接
    常见用途：‌
        页面内导航的占位符
        配合JavaScript实现动态功能
        作为返回顶部按钮的基础结构

    <a> 标签是构建网页导航和内容互联的基础元素，通过合理使用可以实现丰富的交互功能

    <span></span> 标签
    <span> 是 HTML 中的一个内联容器元素，主要用于对文本或其他内联元素进行分组和样式化
    主要特点：‌
        内联元素‌：不会独占一行，仅占据其内容所需的空间
        无语义含义‌：本身不带有任何语义，纯粹用于样式和脚本操作
        常用场景‌：
            对部分文本应用特定样式（颜色、字体等）
            通过 JavaScript 操作特定文本片段
            配合 CSS 类名实现精细化样式控制

            ‌与 <div> 的区别：‌
                    <span> 是内联元素，适合文本级别操作
                    <div> 是块级元素，适合页面布局和结构分组
                    <span> 元素在前端开发中非常实用，特别适合需要对小段内容进行独立控制的情况

        在HTML里面引用外部javascript文件 使用格式 <script rel="script" src=""></script>
        在HTML里面引用外部css文件        使用格式 <link rel="stylesheet" type="text/css" href="">

-->